<template>
  <div>
    <el-table v-loading="tableObj.loading" border :data="tableObj.list" style="width: 100%">
      <template v-for="item in tableObj.head" :key="item.key">
        <el-table-column
          v-if="!item.slot" 
          :prop="item.key" :label="item.title" :align="item.align" header-align="center" :min-width="item.minWidth" :fixed="item.fixed" show-overflow-tooltip
          label-class-name="g5"
        >
        </el-table-column>
        <el-table-column
          v-else 
          :label="item.title" :width="item.minWidth" :align="item.center" header-align="center" :fixed="item.fixed" show-overflow-tooltip
          label-class-name="g5"
        >
          <template v-slot:default="scope">
            <slot :name="item.slot" :row="scope.row" :column="item"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="f ac xe pt15">
      <el-pagination 
        :hide-on-single-page="false"
        background
        layout="total,prev,pager,next,jumper"
        v-model:current-page="tableObj.currentPage"
        :page-size="tableObj.pageSize" 
        :total="tableObj.totalCount" 
        @change="changePageAndSize"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import f from "./index.js"
export default {
  components: {},
  props: {
    tableObj: {type: Object, default: () => ({}) },
  },
  emits: ['setTableObj', 'changeTable'],
  setup(props, { emit }) {
    return f(props, emit)
  }
}
</script>
<style scoped></style>